import { Question } from "../interface";

const questions: Question[] = [
    {
        question: "获取ID为'title'的DOM元素，正确的方法是：",
        radios: [
            "document.querySelector('#title')",
            "document.getElementByTagName('title')",
            "window.getElementById('title')",
            "document.find('#title')"
        ],
        desc: "querySelector是获取DOM元素的标准方法，支持CSS选择器"
    },
    {
        question: "关于事件冒泡和捕获，错误的是：",
        radios: [
            "事件流分为捕获阶段、目标阶段和冒泡阶段",
            "addEventListener第三个参数默认为false（冒泡）",
            "e.stopPropagation()可以阻止事件冒泡",
            "捕获阶段先于目标阶段触发"
        ],
        desc: "所有描述都正确，此题设计有误，应更换为其他错误描述"
    },
    {
        question: "下列哪些属性属于BOM对象？",
        radios: [
            "navigator",
            "location",
            "history",
            "document"
        ],
        muti: true,
        desc: "document属于DOM对象，其他都是BOM对象"
    },
    {
        question: "关于DOM操作性能优化，正确的是：",
        radios: [
            "使用文档片段（DocumentFragment）减少重绘",
            "频繁操作style应使用cssText合并",
            "读取offsetWidth会强制触发重排",
            "使用事件委托减少事件监听器"
        ],
        muti: true,
        desc: "所有选项都是DOM性能优化的正确做法"
    },
    {
        question: "下列代码的输出结果是什么？\nconsole.log(window.location.href === document.URL);",
        radios: [
            "true",
            "false",
            "undefined",
            "Error"
        ],
        desc: "两者都返回当前页面的完整URL，结果为true"
    },
    {
        question: "关于localStorage和sessionStorage，错误的是：",
        radios: [
            "存储容量均为约5MB",
            "都受同源策略限制",
            "sessionStorage在窗口关闭后失效",
            "localStorage存储的数据可以跨子域共享"
        ],
        desc: "localStorage不能跨子域共享，需相同协议/域名/端口"
    },
    {
        question: "动态创建div元素并添加到body末尾的正确方法是：",
        radios: [
            "document.createElement('div').appendTo(document.body)",
            "document.body.append(document.newElement('div'))",
            "document.createElement('div').append(document.body)",
            "document.body.appendChild(document.createElement('div'))"
        ],
        desc: "标准DOM方法是createElement + appendChild"
    },
    {
        question: "下列哪些方法可以滚动页面到指定元素？",
        radios: [
            "element.scrollIntoView()",
            "window.scrollTo(element.offsetTop)",
            "element.focus()",
            "document.scroll(element)"
        ],
        muti: true,
        desc: "focus()可能触发滚动但不是标准方法，document.scroll不存在"
    },
    {
        question: "关于事件对象，正确的是：",
        radios: [
            "e.target始终指向事件绑定元素",
            "e.currentTarget指向当前触发元素",
            "e.preventDefault()阻止默认行为",
            "e.stopImmediatePropagation()阻止同级监听器"
        ],
        muti: true,
        desc: "target指向触发元素，currentTarget指向绑定元素"
    },
    {
        question: "获取元素计算样式的正确方法是：",
        radios: [
            "element.style",
            "window.getComputedStyle(element)",
            "document.defaultView.getStyle(element)",
            "element.currentStyle"
        ],
        desc: "getComputedStyle是标准方法，currentStyle是IE旧方法"
    },
    {
        question: "下列哪些操作会触发浏览器重排（reflow）？",
        radios: [
            "修改元素的color",
            "获取offsetWidth",
            "改变元素的className",
            "设置transform: translateX(10px)"
        ],
        muti: true,
        desc: "transform不会触发重排（属于合成层变化），其他都会"
    },
    {
        question: "关于定时器，错误的是：",
        radios: [
            "setTimeout(fn, 0)会立即执行",
            "setInterval可能发生任务堆积",
            "clearTimeout可以取消未执行的定时器",
            "requestAnimationFrame比定时器更适合动画"
        ],
        desc: "setTimeout(fn, 0)实际会有至少4ms延迟"
    },
    {
        question: "下列代码的输出结果是什么？\nconsole.log(document.readyState);",
        radios: [
            "\"loading\"",
            "\"interactive\"",
            "\"complete\"",
            "取决于文档加载状态"
        ],
        desc: "readyState反映当前文档加载状态，可能返回三种值"
    },
    {
        question: "关于FormData API，正确的是：",
        radios: [
            "可以用于文件上传",
            "会自动设置Content-Type为multipart/form-data",
            "可以通过new FormData(formElement)创建",
            "只能通过AJAX发送"
        ],
        muti: true,
        desc: "FormData也可以通过fetch等现代API发送"
    },
    {
        question: "下列哪些是DOM元素的只读属性？",
        radios: [
            "clientWidth",
            "scrollHeight",
            "innerHTML",
            "className"
        ],
        muti: true,
        desc: "innerHTML和className可读写，其他是只读的"
    },
    {
        question: "关于MutationObserver，错误的是：",
        radios: [
            "可以监听DOM树变化",
            "比Mutation Events性能更好",
            "是同步执行的",
            "可以监听属性变化"
        ],
        desc: "MutationObserver是异步触发回调的"
    },
    {
        question: "检测浏览器是否支持WebP格式的正确方法是：",
        radios: [
            "navigator.supportWebP",
            "document.createElement('canvas').toDataURL('image/webp')",
            "window.checkFormat('webp')",
            "new Image().test('webp')"
        ],
        desc: "通过canvas的toDataURL检测是实际可行方案"
    },
    {
        question: "关于拖放API，正确的是：",
        radios: [
            "需要设置draggable=\"true\"",
            "dragstart事件在目标元素触发",
            "dataTransfer可以传输多种数据",
            "drop事件默认禁止放置"
        ],
        muti: true,
        desc: "dragstart在拖拽元素上触发，其他选项正确"
    },
    {
        question: "下列代码的作用是：\ndocument.documentElement.dataset.theme = 'dark';",
        radios: [
            "设置HTML元素的data-theme属性",
            "修改文档主题色",
            "存储数据到本地存储",
            "定义新的CSS变量"
        ],
        desc: "dataset用于操作元素的data-*属性"
    },
    {
        question: "关于Screen API，错误的是：",
        radios: [
            "screen.width返回屏幕物理宽度",
            "screen.availWidth不包括任务栏",
            "screen.orientation检测屏幕方向",
            "screen.pixelDepth始终返回32"
        ],
        desc: "screen.pixelDepth返回颜色深度，不一定是32"
    }
];

export default questions;